<template>
    <el-dialog title="新增店铺" :visible.sync="thisAddPage" :before-close="handleClose">
        <el-form ref="userForm" :model="userForm" label-width="160px" :rules="rules">
        <el-form-item label="门店编号" prop="shopNo">
            <el-input v-model="userForm.shopNo"></el-input>
        </el-form-item>
        <el-form-item label="门店名称" prop="shopName">
            <el-input v-model="userForm.shopName"></el-input>
        </el-form-item>
        <el-form-item label="所在城市" prop="city">
            <el-select v-model="userForm.city" placeholder="请选择城市">
                <el-option value="南宁市" label="南宁市"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="所在区域" prop="area">
            <el-select v-model="userForm.area" placeholder="请选择区/县">
                <el-option value="高新区" label="高新区"></el-option>
                <el-option value="江南区" label="江南区"></el-option>
                <el-option value="西乡塘区" label="西乡塘区"></el-option>
                <el-option value="青秀区" label="青秀区"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="shopAddress">
            <el-input v-model="userForm.shopAddress"></el-input>
        </el-form-item>
        <el-form-item label="电话"  prop="phone">
            <el-input  v-model="userForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="门店状态"  prop="shopStatus">
             <el-radio-group v-model="userForm.shopStatus">
                <el-radio border label="1" aria-checked="checked">正常</el-radio>
                <el-radio border label="0">关闭</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('userForm')">创 建</el-button>
            <el-button @click="resetForm('userForm')">重 置</el-button>
            <el-button @click="change">取 消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { addShop } from '@api/restaurant/sys/resShop'
  export default {
    data() {

      var validateMobile = (rule, value, callback) => {
        if (value === '') {
          callback()
        }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))
        && !(/^0\d{2,5}-\d{7,8}$/.test(value))){ 
            callback(new Error('请输入正确的联系方式!'));
        } else {
          callback();
        }
      };
      
      return {
        thisAddPage: this.addPage,
        userForm: {
          shopNo: '',
          shopName: '',
          city: '',
          area: '',
          shopAddress:'',
          phone:'',
          shopStatus:'1'
        
        },

        rules: {
          shopNo: [
            { required: true}
          ],
          shopName:[
            { required: true}
          ],
          phone:[
            { validator: validateMobile, trigger: 'blur' }
          ]
        }
      }
    },
    /**双向绑定 start */
    props: ["addPage"],
    watch: {
        addPage(val) {
            this.thisAddPage = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
        },
        thisAddPage(val){
            //xxcanghai 小小沧海 博客园
             this.$emit("on-addPage-change",val);//③组件内对myResult变更后向外部发送事件通知
        }
    },
  
    methods: {
        change() {
            this.thisAddPage = !this.thisAddPage;
            //重置表单
            this.$refs['userForm'].resetFields();
        },
          /**双向绑定 end */

        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.loading = true

                addShop(this.userForm).then(res=>{
                    this.$message({
                    message: '创建成功',
                    type: 'success'
                    });
                     this.$emit("on-loadlist-change");//③组件内对myResult变更后向外部发送事件通知
                     this.loading = false
                     this.change()
                }).catch(err=>{
                    console.log('err', err)
                    this.loading = false
                })
               
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
         },
        handleClose(done){
            this.$confirm('确定关闭吗').then(() => {
                // function(done)，done 用于关闭 Dialog
                this.$refs.userForm.resetFields()
                done();
            }).catch(() => {
               // console.log("点击确定时触发");
            });
        },
        // selectShopCharge(){
        //     if (this.userForm.shopName) {
        //         const [value,shopNo,lable] = this.userForm.shopName.split('|')
        //         this.userForm.shopId = value
        //         this.userForm.shopNo = shopNo
        //         this.userForm.shopName = lable
        //     }
        //     console.info(JSON.stringify(this.userForm))
        // }
    },
    created(){
        //console.log("created");
    },
    mounted(){
        //console.log("mounted");
        //预加载部门信息
        // getShops().then(res => {
        //         // console.log(JSON.stringify(res.data))
        //         this.shops = res.data
        //         this.loading = false
        //     }).catch(err => {
        //         console.log('err', err)
        //         this.loading = false
        //     })
        
    },
    computed:{
       
    }
  }
</script>